<template>
	<view class="store-order skinStyle1">
		<!-- 非顾客情况 -->
		<template v-if="isMember==='notgk'">
			<scroll-view class="top-tabs-view" v-if="tabs.length>0" scroll-x="true">
				<block v-for="(tab,index) in tabs" :key="index">
					<view class="tabs-item-wrap" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
						<view class="tabs-item">
							<view class="tabs-item-txt" :class="[currentTab==index ? 'theme-color' : '']">{{tab.name}}</view>
							<view class="tabs-item-bottom" :class="[currentTab==index ? 'theme-color' : '']"></view>
						</view>
					</view>
				</block>
			</scroll-view>
			<view class="search-header">
				<!-- 订单一览搜索 -->
				<template v-if="currentTab===0">
					<view class="search-searchbox">
						<view class="iconfont iconsousuohome"></view>
						<input class="search-input" v-model="keyWord" confirm-type="search" @confirm="getShopOrderList({size:10,num:1})"
						 placeholder="请输入顾客名、顾客号或订单号" placeholder-class="placeholder"></input>
						<view class="search-clear iconfont iconguanbi1" v-if="keyWord" @tap="clearKeyWord"></view>
						<view class="search-scan" @tap="scan">
							<image src="~@/packageC/static/img/h-scan.png" mode=""></image>
						</view>
					</view>
					<view class="order-condition" @tap="showSider">
						<image src="~@/packageC/static/img/condition.png" mode="筛选"></image>
					</view>
				</template>
				<!-- 优惠券搜索 -->
				<template v-if="currentTab===1">
					<view class="search-searchbox">
						<view class="iconfont iconsousuohome"></view>
						<input class="search-input" v-model="customCoupon" confirm-type="search" @confirm="getCouponsList({size:10,num:1})"
						 placeholder="搜索体验券名称" placeholder-class="placeholder"></input>
						<view class="search-clear iconfont iconguanbi1" v-if="customCoupon" @tap="clearCustomCoupon"></view>
						<!-- <view class="search-scan" @tap="getCouponsList({size:10,num:1})">
							<image src="~@/packageC/static/img/h-scan.png" mode=""></image>
						</view> -->
					</view>
					<!-- <view class="order-condition" @tap="popupShow=true">
						<image src="~@/static/img/date.png" mode="筛选"></image>
					</view> -->
				</template>
			</view>
		</template>
		
		<!-- 顾客订单一览搜索 -->
		<view class="search-header" style="border-top: none;top: 0;" v-if="isMember==='gk'">
			<view class="query-date">订单时间</view>
			<view class="dateContent">
				<view class="date-item" @click="onShowDatePicker('createTimeStart')">
					{{createTimeStart}}
				</view>
				<view class="date-line"></view>
				<view class="date-item" @click="onShowDatePicker('createTimeEnd')">
					{{createTimeEnd}}
				</view>
			</view>
			<view class="search-date" @tap="searchCustomerOrder">搜索</view>
		</view>
		
		<mescroll-body :top="isMember==='notgk'?180:120" ref="mescrollRef" @up="loadList" @init="mescrollInit" :up="upOption"
		 @down="downCallback">
			<!-- 订单一览 -->
			<template v-if="((isMember==='notgk')&&currentTab===0)||isMember==='gk'">
				<view class="order-section pd1" v-for="item in list" :key="item.id">
					<view class="order-number">
						<view class="number-left">
							<text>{{item.orderCode}}</text>
							<image @tap="copy(item.orderCode)" src="~@/packageC/static/img/copy.png"></image>
						</view>
						<view class="status" v-if="item.orderStatus" v-html="getOrderStatus(item.orderStatus)">
						</view>
					</view>
					<scroll-view scroll-x scroll-with-animation v-if="item.records.length>0">
						<view class="order-goods row">
							<view class="order-goods-item" v-for="(goodItem,index) in item.records" :key="index">
								<view class="order-img">
									<image v-if="goodItem.imgList.length>0" :src="imgSrc + goodItem.imgList[0].imgReuri" />
								</view>
								<view class="tag" v-if="goodItem.goodsNum>0">{{goodItem.goodsNum}}</view>
							</view>
						</view>
					</scroll-view>
					<template v-if="isMember!='gk'">
						<view class="user-item">
							<view class="left">顾客姓名</view>
							<view class="right">{{item.userName?item.userName:item.nickName}}</view>
						</view>
						<view class="user-item">
							<view class="left">顾客号</view>
							<view class="right">{{item.memberCode}}</view>
						</view>
						<view class="user-item">
							<view class="left">手机号</view>
							<view class="right">{{item.userMobile?item.userMobile:'暂无'}}</view>
						</view>
					</template>
					<view class="user-item">
						<view class="left">订单时间</view>
						<view class="right">{{item.createTime}}</view>
					</view>
					<view class="user-item boder-b">
						<view class="left">总金额(元)</view>
						<view class="right red">￥{{item.realAmount}}</view>
					</view>

					<view class="order-btns">
						<tui-button class="btn" type="danger" width="160rpx" height="62rpx" :size="28" shape="circle" @tap="jumpPage(item,'detail')">查看详情</tui-button>
						<template v-if="isMember!='gk'">
							<template v-if="item.orderStatus===2">
								<tui-button class="btn" type="danger" width="160rpx" height="62rpx" :size="28" shape="circle" @tap="jumpPage(item,'settle')">继续收款</tui-button>
							</template>
							<template v-if="item.orderStatus==3||(item.orderStatus==6 && item.bottonFlag=='1')">
								<tui-button class="btn" type="black" :plain="true" width="160rpx" height="62rpx" :size="28" shape="circle" @tap="jumpPage(item,'return')">退货</tui-button>
								<tui-button class="btn" type="black" :plain="true" width="160rpx" height="62rpx" :size="28" shape="circle" @tap="jumpPage(item,'exchange')">换货</tui-button>
							</template>
						</template>
					</view>
				</view>
				<template v-if="isMember!='gk'">
					<drag-button
					:isDock="true"
					:existTabBar="true"
					@btnClick="tipsToggle"/>
				</template>
				
				<!-- 扫码功能 -->
				<!-- 兼容微信小程序 -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="scan-wrap" v-if="scanFlag">
					<camera-scan :scanTip="scanTip" @close="closeCashScan" @scanCode="cashScanCode"></camera-scan>
				</view>

				<!-- #endif -->
				
			</template>
			<!-- 优惠券 -->
			<template v-if="(isMember==='notgk')&&currentTab===1">
				<view class="coupons-body">
					<view class="coupon-cell" v-for="(item,index) in couponList" @tap="navTo('/packageC/pages/verificationPerson/verificationPerson?customCoupon='+item.customCoupon)">
						<view>
							<text class="title">券名</text>
							<view>
								<text class="value">{{item.customCoupon||''}}</text>
								<!-- <text class="iconfont iconxiangyou skin-down-arrow"></text> -->
							</view>
						</view>
						<view>
							<text class="title">券数</text>
							<view>
								<text class="value">{{item.count||0}}</text>
								<text class="iconfont iconxiangyou skin-down-arrow"></text>
							</view>
						</view>
					</view>
				</view>
			</template>

		</mescroll-body>
		
		<!--退换货说明  -->
		<uni-drawer :visible="tipsFlag" mode="right" @close="closeTipsDraw()">
			<view class="tips-wrap">
				<view class="tips-title">新生活售后服务规范</view>
				<view class="mb">为了维护消费者的合法权益，新生活集团（中国）有限公司（以下简称“新生活”）依据《中华人民共和国产品质量法》、《中华人民共和国消费者权益保护法》等相关规定制定本退换货制度。</view>
				<view class="mb">新生活享有对本制度的最终解释权，并有权适时对本制度进行修改。</view>
				<view>
					<view class="fw mb sub-title">• 售后退换货规定</view>
					<view class="mb">经确认属通过正常销售途径购买新生活产品的消费者，可持有效购物凭证到购买店铺申请退换货。</view>
					<view class="mb fw">1、普通产品售后退换货规定：</view>
					<view class="mb">退换货：消费者自购买产品7日内产品保持原样，或在正确使用情况下，发现质量问题时，可持有效的购物凭证到购买店铺申请退换货；购买15日内正确使用情况下，出现质量问题无法正常使用时，可持有效的购物凭证到购买店铺申请换货。</view>
					<view class="mb">维 修：消费者自购买产品15日以上，出现质量问题无法正常使用时，可持有效的购物凭证和产品保修卡到购买店铺申请维修，公司依据国家的法律法规提供售后服务。</view>
					<view class="mb fw">2.	化妆品售后退换货规定：</view>
					<view class="mb">消费者自购买化妆品7日内产品保持原样，或购买产品1个月内，
产品使用量不超过1/3，出现质量问题无法正常使用时，可持有效购物凭证到购买店铺申请退换货。如果在购买产品1个月内，产品使用量不超过1/3，因使用产品而出现不良反应，需提供有效购物凭证及因使用新生活产品造成过敏的医院诊断证明。在确认上述要求属实后，可给予办理退换货。</view>
				</view>
				<view>
					<view class="fw mb sub-title">•	售后退换货申办条件</view>
					<view class="mb">1.	消费者提出退换货申请时，需要出具相应产品的购物凭证、以及返还购买产品所得赠品、促销品等。</view>
					<view class="mb">2.	退换产品需符合退换货规定，经核实需属于产品质量问题，产品状态、使用方法、保存方法等均无人为因素，若消费者或经销人员责任造成的退换货，公司不予受理。</view>
					<view class="mb">3.	消费者申请维修时，需要出具产品保修卡，保修卡是申请免费维修的重要凭证。</view>
				</view>
			</view>
		</uni-drawer>
		<sider-condition ref='condition' @touchmove.stop :list="menuList" @result="resultConditon"></sider-condition>
		<date-popup @determine='determine' :beginDate='beginDate' :endDate='endDate' :popupShow='popupShow' @colosePopup='popupShow=false'></date-popup>
		<mx-date-picker :show="showPicker" color="#EA655E" :type="dateType" :value="dateValue" :show-tips="true"
		 :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
		<!--后台接口返回错误提示框-->
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import uniCopy from '@/utils/uni-copy.js'
	import tuiButton from '@/components/button/button';
	import siderCondition from '@/packageC/components/siderCondition/siderCondition.vue';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import datePopup from "@/components/datePopup/index.vue"
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	// #ifdef MP-WEIXIN
	import cameraScan from "@/packageC/components/camera/camera.vue"
	// #endif
		import uniDrawer from '@/packageC/components/uni-drawer/uni-drawer.vue';
	import dragButton from "@/packageC/components/drag-button/drag-button.vue";
	
	export default {
		mixins: [MescrollMixin],
		components: {
			tuiButton,
			siderCondition,
			datePopup,
			MxDatePicker,
			// #ifdef MP-WEIXIN
			cameraScan,
			// #endif
			uniDrawer,
			dragButton,
		},
		data() {
			return {
				codeFlag: false,
				imgSrc: this.$store.state.imgUrl,
				tabs: [{
					name: "店铺订单"
				}, {
					name: "线下体验券"
				}],
				currentTab: 0, //当前tab

				menuList: [{
					'title': '订单状态',
					'type': 'custom',
					'key': 'custom2',
					'isMutiple': false, //单选
					'detailList': [{
						title: '待支付',
						value: 2,
					}, {
						title: '已支付',
						value: 3,
					}, {
						title: '已取消',
						value: 4,
					}, {
						title: '已完成',
						value: 5,
					}, {
						title: '已退换',
						value: 6,
					}],
				}, {
					'title': '订单生成时间',
					'type': 'dateRange',
					'start': 'beginDate',
					'end': 'endDate',
				}, {
					'title': '时间排序',
					'type': 'custom',
					'key': 'sort',
					'isMutiple': false, //单选
					'detailList': [{
						title: '升序',
						value: "1",
					}, {
						title: '降序',
						value: "2",
						isSelected:true
					}],
				}],
				list: [], //订单lis
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5,
				},
				//体验券相关
				customCoupon: '',
				// couponsKey: '', //体验券关键词
				couponList: [], // 体验券列表
				popupShow: false, // 时间弹窗
				beginDate: '',
				endDate: '',
				isMember: '',
				keyWord: '',
				goodsUniqueCode: '',
				customerUserId: '',
				customerUserName: '',
				orderId: '',
				orderStatus: '',
				createTimeStart: '',
				createTimeEnd: '',
				sort: '2',
				scanFlag: false,
				scanTip: '',
				// 顾客订单查询条件
				showPicker: false,
				dateType: 'rangetime',
				dateValue: '',
				tipsFlag:false,
				orgLv:'',
			}
		},
		onLoad(options) {
			// #ifdef H5
			this.$wechat.noShare();
			// #endif
			if (options && options.currentTab) {
				this.currentTab = Number(options.currentTab);
				// this.swichMenu(this.currentTab)
			}

			let memberType=uni.getStorageSync('memberType')
			if (uni.getStorageSync('orgLv') !== 'gk'&& uni.getStorageSync('orgLv') !== 'hy'&&memberType!==1) { //不用true,false,防止界面闪现
				this.isMember = 'notgk'
			} else {
				this.isMember = 'gk'
			}
			
			if(uni.getStorageSync('storeOrgLv')){
				this.orgLv=uni.getStorageSync('storeOrgLv')
			}else{
				this.orgLv=uni.getStorageSync('orgLv')
			}

		},
		onShow() {
			// #ifdef APP-PLUS
			this.$eventHub.$off('appScanCode');
			this.$eventHub.$on('appScanCode',(codeRes) => {
				this.cashScanCode(codeRes)
			});
			// #endif
		},
		methods: {
			// 顾客订单日期选择显示
			onShowDatePicker(type) {
				this.dateType = type;
				this.showPicker = true;
				this.dateValue = this.$util.getYearMonthDay(new Date());
			},
			//选择顾客订单时间
			onSelected(e, key) {
				if (e.value) {
					this[this.dateType] = this.$util.getYearMonthDay(new Date(e.value));
					this.showPicker = false;
				}else{
					this[this.dateType]='';
					this.showPicker = false;
				}
			},
			searchCustomerOrder() {
				if (this.createTimeStart && this.createTimeEnd) {
					let beginTime = new Date(this.createTimeStart.replace(/\-/g, '/')).getTime();
					let endTime = new Date(this.createTimeEnd.replace(/\-/g, '/')).getTime();
					if (beginTime > endTime) {
						if (this.dateType === 'createTimeStart') {
							this.$util.toast('开始时间不能大于结束时间');
						} else {
							this.$util.toast('结束时间不能小于开始时间');
						}
						return
					}
				}	
				this.getGkOrder({
					num: 1,
					size: 10
				})
				
			},
			getOrderStatus(status) {
				return ["订单生成", "待支付", "已支付", "已取消", "已完成", "已退换"][status - 1]
			},
			loadList(page) {
				if (this.currentTab === 0) {
					if(this.isMember == 'gk') {
						this.getGkOrder(page)
					} else {
						this.getShopOrderList(page)
					}	
				} else {
					this.getCouponsList(page)
				}
			},
			// 券 列表
			getCouponsList(page) { //体验券
				const params = {
					current: page.num,
					pageSize: page.size,
					customCoupon: this.customCoupon, // 券名
					createTimeStart: this.beginDate, // 开始核销时间
					createTimeEnd: this.endDate // 开始核销时间
				};
				this.$http.getEsCouponOrder(params).then((res) => {
					if (res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.couponList = []
						};
						this.couponList = this.couponList.concat(curPageData);
					}
				})
			},
			//顾客订单一览
			getGkOrder(page) {
				let params = {
					current: page.num,
					pageSize: page.size,
					orgLv:'gk',
					customerUserId: uni.getStorageSync('customerUserId'),
				}
				if(this.createTimeStart) {
					params.createTimeStart = this.createTimeStart;
				}
				if(this.createTimeEnd) {
					params.createTimeEnd = this.createTimeEnd;
				}
				console.log(params)
				this.$http.getStoreOrderList(params).then((res) => {
					if (res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.list = []
						};
						this.list = this.list.concat(curPageData);
					} else {
						this.mescroll.endErr()
					}
				}).catch(() => {
					this.mescroll.endErr()
				});
			},
			getShopOrderList(page) {
				
				let params = {
					current: page.num,
					pageSize: page.size,
					keyWord: this.keyWord,
					goodsUniqueCode: this.goodsUniqueCode,
					// customerUserId:this.customerUserId,
					// customerUserName:this.customerUserName,
					// orderId: this.orderId,
					orderStatus: this.orderStatus,
					createTimeStart: this.createTimeStart,
					createTimeEnd: this.createTimeEnd,
					sort: this.sort,
					orgLv:this.orgLv,
					loginId:uni.getStorageSync('agencyId'),
					loginName:uni.getStorageSync('storeOrgName'),
					
				}
				this.$http.getStoreOrderList(params).then((res) => {
					if (res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.list = []
						};
						this.list = this.list.concat(curPageData);
					}
				})
			},
			searchCoupon() {
				this.getShopOrderList({
					size: 10,
					num: 1
				})
			},
			copy(content) {
				uniCopy({
					content: content,
					success: (res) => {

						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},

			//筛选返回值
			resultConditon(obj) {
				this.$refs.condition.visibleDrawer = false;
				console.log(obj);
				let result = obj.result;
				this.orderStatus = result.custom2;
				if (result.beginDate) {
					this.createTimeStart = result.beginDate
				} else {
					this.createTimeStart = ""
				}
				if (result.endDate) {
					this.createTimeEnd = result.endDate
				} else {
					this.createTimeEnd = ""
				}

				this.sort = result.sort;
				this.getShopOrderList({
					num: 1,
					size: 10
				})
			},
			showSider(obj) {
				this.$refs.condition.visibleDrawer = true;
			},
			jumpPage(item, type) {
				if (type === 'detail') {
					uni.navigateTo({
						url: `/packageC/pages/storeOrder/orderDetail?orderCode=${item.orderCode}`
					})
				} else if (type === 'settle') { //继续收款
					uni.navigateTo({
						url: `/packageC/pages/storeCart/cartSettlement?orderId=${item.id}&version=${item.version}`
					});

				} else if (type === 'return') { //退货
					// 退货传参
					uni.navigateTo({
						url: `/packageC/pages/storeOrder/returnGoods?orderCode=${item.orderCode}&orderId=${item.id}&version=${item.version}`
					})

				} else if (type === 'exchange') {
					// orderId

					// version

					uni.navigateTo({
						url: `/packageC/pages/storeOrder/exchangeGoods?orderCode=${item.orderCode}&orderId=${item.id}&version=${item.version}`
					})
				}
			},
			swichMenu: async function(current) { //点击其中一个 tab
				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;
					this.list = [] // 先置空列表,显示加载进度
					this.mescroll.resetUpScroll(); // 再刷新列表数据

					// #ifdef APP-PLUS
					// if (current === 1) {
					// 	this.getCouponsList({
					// 		num: 1,
					// 		size: 10
					// 	})
					// }
					// #endif 

				}
			},
			determine(data,flag){
				if(flag=='clear'){
					this.beginDate=''
					this.endDate=''
				}else{
					this.beginDate=data[0]
					this.endDate=data[1]
				}
				this.popupShow = false
				// console.log(data)
				// console.log(this.beginDate)
				// console.log(this.endDate)
				this.getCouponsList({
					size: 10,
					num: 1
				})
			},
			scan() {
				this.scanTip = '请扫描商品二维码';
				uni.showToast({
					icon: 'none',
					title: '请扫描商品二维码',
					duration: 1500,
				})
				// #ifdef MP-WEIXIN
				this.scanFlag = true;
				// #endif
				// #ifdef APP-PLUS
				uni.navigateTo({
					url:'/packageC/pages/scan/scan'
				})
				// #endif
				// #ifdef H5
				setTimeout(() => {
					this.$wechat.scanQRCode((str) => {
						 //str为扫码结果
						 this.cashScanCode(str)
					});
				}, 2000);
				// #endif
				
				
			},
			cashScanCode(codeRes) {
				let that = this;
				that.scanTip = '请扫描商品二维码';
				if (typeof codeRes === 'string' && codeRes.indexOf("=") > -1) {
					let goodsUniqueCode = codeRes.split("=")[1].trim(); //商品唯一码
					if (goodsUniqueCode.length !== 29) {
						that.scanTip = '请扫描正确的商品二维码';
						uni.showToast({
							icon: 'none',
							title: '请扫描正确的商品二维码',
							duration: 1000,
						})
						// #ifdef H5
						setTimeout(() => {
							that.$wechat.scanQRCode((str) => {
							that.cashScanCode(str)
							});
						}, 1000);
						// #endif
						return;
					}
					console.log(goodsUniqueCode);
					that.goodsUniqueCode = goodsUniqueCode;
					that.getShopOrderList({
						num: 1,
						size: 10
					})
					that.scanFlag = false;
					// #ifdef APP-PLUS
					that.$eventHub.$emit('appScanClose');
					// #endif
				}else{
					that.scanTip = '请扫描正确的商品二维码';
					uni.showToast({
						icon: 'none',
						title: '请扫描正确的商品二维码',
						duration: 1000,
					})
					// #ifdef H5
					setTimeout(() => {
						that.$wechat.scanQRCode((str) => {
						that.cashScanCode(str)
						});
					}, 1000);
					// #endif
				}
			},
			closeCashScan() {
				this.scanFlag = false
			},
			clearKeyWord() {
				this.keyWord = "";
				this.getShopOrderList({size:10,num:1})
			},
			clearCustomCoupon(){
				this.customCoupon = "";
				this.getCouponsList({
					size: 10,
					num: 1
				})
			},
			tipsToggle(){
				this.tipsFlag=true;
			},
			closeTipsDraw(){
				this.tipsFlag=false;
			}
		}
	}
</script>

<style lang="scss">
	@import "@/packageC/static/style/common.scss";

	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.store-order {
		// width: 100%;
		// padding-top: 180rpx;
		// position: relative;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.top-tabs-view {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			box-shadow: 0 0 4rpx #FFFFFF;
			white-space: nowrap;
			height: 90rpx;
			position: fixed;
			left: 0;
			top: 0;
			/* css变量 */
			z-index: 888;
			border-top: 2rpx solid $borderColor;
			box-shadow: 0 0 4rpx $borderColor;
			border-top: 1rpx solid $borderColor;

			.tabs-item-wrap {
				display: inline-block;
				white-space: nowrap;
				height: 90rpx;
				width: 50%;

				.tabs-item {
					margin-left: 35rpx;
					margin-right: 30rpx;
					position: relative;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.tabs-item-txt {
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
						font-weight: 400;

						// color: #333333;
						&.theme-color {
							color: $themeColor1;
						}
					}

					.tabs-item-bottom {
						position: absolute;
						bottom: 0rpx;
						width: 130rpx;
						height: 6rpx;
						left: calc(50% - 65rpx);
						&.theme-color {
							background-color: $themeColor1;
						}
					}
				}
			}

			&.tabs-view-other {
				.tabs-item-wrap {
					width: 25%;
				}
			}
		}

		.search-header {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 20rpx 0 30rpx;
			background-color: #fff;
			border-top: 10rpx solid #f7f7f7;
			border-bottom: 10rpx solid #f7f7f7;
			position: fixed;
			top: 90rpx;
			left: 0;
			height: 110rpx;
			z-index: 500;

			.search-picker {
				width: 120rpx;
				height: 100%;
				font-size: 28rpx;
				margin-right: 10rpx;

				.search-picker-inner {
					width: 100%;
					height: 90rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.iconfont {
						color: #999;
					}
				}
			}

			.search-searchbox {
				flex: 1;
				height: 70rpx;
				border-radius: 80rpx;
				font-size: 24rpx;
				// background: $borderColor;
				border: 2rpx solid $themeColor1;
				padding: 6rpx 10rpx 6rpx 20rpx;
				box-sizing: border-box;
				color: #999;
				display: flex;
				align-items: center;
				overflow: hidden;

				.search-input {
					text-align: left !important;
					margin-left: 12rpx;
					width: 100% !important;
					background-color: #fff !important;
					color: #121212;
					font-size: 28rpx;

					.uni-input-input {
						width: 100%;
						font-size: 30rpx;
					}
				}

				.search-text {
					font-size: 32rpx;
					color: #444;
					margin: 0 20rpx 0 30rpx;
					color: $red;
				}

				.search-search-text {
					padding-left: 16rpx;
				}

				.search-search-key {
					max-width: 80%;
					height: 100%;
					padding: 0 16rpx;
					margin-left: 12rpx;
					display: flex;
					align-items: center;
					border-radius: 15px;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
				}

				.search-key-text {
					box-sizing: border-box;
					padding-right: 12rpx;
					font-size: 12px;
					line-height: 12px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.search-clear {
					padding: 10rpx;
				}

				.search-scan {
					padding: 20rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.order-condition {
				width: 36rpx;
				height: 40rpx;
				margin-left: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.query-date {
				font-size: 26rpx;
				// margin-right: 30rpx;
			}

			.search-date {
				color: #EA655E;
				font-size: 28rpx;
			}

			.dateContent {
				height: 68rpx;
				margin: 16rpx 10rpx 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.date-item {
					width: 230rpx;
					height: 68rpx;
					line-height: 68rpx;
					background: #F6F6F6;
					border-radius: 34rpx;
					text-align: center;
					font-size: 28rpx;
				}

				.date-line {
					width: 24rpx;
					height: 4rpx;
					background-color: #666666;
					margin: 0 16rpx;
				}

			}

		}

		.order-section {
			width: 100%;
			background-color: #fff;
			margin-top: 16rpx;
			color: #111111;

			&.pd1 {
				padding: 30rpx 30rpx 0 30rpx;
			}

			.order-number {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.number-left {
					text {
						font-size: 28rpx;
						float: left;
						margin-right: 16rpx;
					}

					image {
						width: 24rpx;
						height: 24rpx;

					}
				}

				.status {
					font-size: 24rpx;
					color: #999;
				}
			}

			.order-btns {
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: row-reverse;
				padding: 24rpx 0rpx;

				.btn {
					margin-left: 16rpx;
				}
			}

			.boder-b {
				border-bottom: 2rpx solid #eee;
			}
		}

		.order-goods {
			flex-wrap: nowrap;
			height: 200rpx;
			padding: 26rpx 0 16rpx;

			.order-goods-item {
				flex-shrink: 0;
				width: 160rpx;
				height: 160rpx;
				margin-right: 24rpx;
				position: relative;

				.order-img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 24rpx;
					overflow: hidden;
					border: 2rpx solid $borderColor;

					image {
						width: 160rpx;
						height: 160rpx;
					}
				}

				.tag {
					width: 40rpx;
					height: 40rpx;
					background: #EA655E;
					border-radius: 50%;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					position: absolute;
					right: -6rpx;
					top: -6rpx;
				}
			}


		}
		
	}



	$nav-height:90rpx;
	$search-height:100rpx;
	$body-top:190rpx;

	.coupons-body {
		// margin-top: $nav-height;
		// margin-top: $body-top;
	}

	.coupons-headers {
		width: 100%;
		height: $search-height;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		// position: fixed;
		// top: calc(var(--window-top) + var(--status-bar-height) + $nav-height);
		// left: 0;
		// z-index: 999;
	}

	.home-search {
		width: 100%;
		height: 60rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
		border-radius: 50rpx;
		border: 1px solid #ED716A;

		.home-search-text {
			font-size: 26rpx;
			color: #CCCCCCFF;
		}
	}

	.coupon-cell {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;

		margin-top: 16rpx;
		padding: 16rpx 32rpx;
		background-color: #fff;

		>view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 16rpx 0rpx;
		}

		text {
			font-size: 28rpx;
		}

		.title {
			color: #999999;
		}

		.value {
			color: #111111;
		}
	}
	
	.tips-wrap{
		padding: 20rpx 32rpx 30rpx;
		height: 100vh;
		overflow-y: auto;
		text-align: justify;
		font-size: 24rpx;
		line-height: 40rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
		.tips-title{
			text-align: center;
			font-size: 30rpx;
			line-height: 70rpx;
			font-weight: bold;
		}
		.sub-title{
			font-size: 28rpx;
		}
		.mb{
			margin-bottom: 20rpx;
		}
		.fw{
			font-weight: bold;
		}
	}
</style>
